<template>
    <div>
        <quill-editor
            :content="content"
            :options="editorOption"
            @change="onEditorChange($event)"/>
    </div>
</template>

<script>

import { quillEditor } from 'vue-quill-editor'
export default {
    components: {
        quillEditor
    },
    props: {
        content: {
            type: String,
            default: '<h2>I am Example</h2>'
        }
    },
    data() {
        return {
            editorOption: {
                // some quill options
            }
        }
    },
    // manually control the data synchronization
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
        onEditorChange({ quill, html, text }) {
            this.$emit('editorChange', html)
        }
    }
}
</script>
